<template>
  <div class="com-select">
    <span class="title" :style="titieStyle">{{ options.title }}</span>
    <el-select
      v-model="options.value"
      placeholder="请输入筛选条件"
      @visibleChange="test"
      @change="changeFn"
    >
      <el-option
        v-for="(item, index) in options.list"
        :key="index"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>


<script>
export default {
  props: {
    /*
     options: {
        value: "edit",          默认选中的那一项
        title: "快速筛选",       标题
        list: [                 select中option的每一项
          {
            value: "edit",       选中的值
            label: "代编辑",      option标题
          },
          {
            value: "examine",
            label: "审核中",
          },
          {
            value: "show",
            label: "展示中",
          },
        ],
      },
    */
    options: {
      type: Object,
      default: () => ({}),
    },
    //title样式
    titieStyle: {
      type: Object,
      default: () => ({
        marginRight: "12px",
        fontSize: "14px",
        fontWeight: "bold",
        color: "#606266",
      }),
    },
  },
  data() {
    return {};
  },

  methods: {
    test() {
      console.log("chufale");
    },
    // 切换筛选条件时触发
    changeFn(value) {
      this.$emit("EventChange", value);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
::v-deep .box-card {
  align-items: center;
  border-bottom: 2px solid black;
  height: 90px;
}

::v-deep .el-card__body {
  .el-form {
    margin-top: 10px;
  }
}
::v-deep .el-select {
  width: $input-width;
}
.title,
span {
  margin-bottom: 10px;
}
.com-select {
  padding-left: 0px;
  display: flex;
  flex-direction: column;
  /* .title {
    margin-right: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #606266;
  } */
}
.ComSelect {
}
</style>
